{% block sw_tax_rule_card %}
<mt-card
    :title="$tc('sw-settings-tax.taxRuleCard.cardTitle')"
    class="sw-tax-rule-card"
    position-identifier="sw-tax-rule"
    :class="taxRuleCardClasses"
    :is-loading="isLoading || taxRulesLoading || cardLoading"
>
    <template #grid>
        <template v-if="!taxRulesEmpty && !disabled">
            {% block sw_tax_rule_card_header %}
            <sw-card-section
                divider="bottom"
                secondary
                slim
            >
                {% block sw_tax_rule_card_header_filter %}
                <sw-card-filter
                    :placeholder="$tc('sw-settings-tax.taxRuleCard.searchBarPlaceholder')"
                    @sw-card-filter-term-change="onSearchTermChange"
                >
                    <template #filter>
                        {% block sw_tax_rule_card_header_create_rule_button %}
                        <mt-button
                            v-tooltip.bottom="{
                                message: $tc('sw-privileges.tooltip.warning'),
                                disabled: acl.can('tax.editor'),
                                showOnDisabledElements: true
                            }"
                            class="sw-tax-rule-grid-button"
                            size="small"
                            :disabled="!acl.can('tax.editor') || undefined"
                            variant="secondary"
                            @click="showModal = true"
                        >

                            {% block sw_tax_rule_card_header_create_document_button_label %}
                            {{ $tc('sw-settings-tax.taxRuleCard.labelCreateNew') }}
                            {% endblock %}

                        </mt-button>
                        {% endblock %}
                    </template>
                </sw-card-filter>
                {% endblock %}

            </sw-card-section>
            {% endblock %}

            {% block sw_tax_rule_card_grid %}
            <sw-data-grid
                :data-source="taxRules"
                :columns="getColumns"
                :full-page="false"
                :show-settings="true"
                :show-selection="false"
                :show-actions="true"
                :is-loading="isLoading"
                :allow-column-edit="false"
                :allow-inline-edit="false"
                v-bind="{sortBy, sortDirection}"
                identifier="sw-tax-rule-grid"
                @column-sort="onColumnSort"
            >
                {% block sw_settings_tax_rule_grid_column_tax_rate %}
                <template #column-taxRate="{ item, isInlineEdit, compact }">
                    <template v-if="isInlineEdit">
                        <mt-number-field
                            v-model="item.taxRate"
                            :digits="3"
                            :size="compact ? 'small' : 'default'"
                        >
                            <template #suffix>
                                <span>
                                    <span v-html="$sanitize($tc('sw-settings-tax.general.taxRateSymbol'))"></span>
                                </span>
                            </template>
                        </mt-number-field>
                    </template>
                    <template v-else>
                        {{ item.taxRate }}%
                    </template>
                </template>
                {% endblock %}

                {% block sw_settings_tax_rule_grid_column_tax_rule_type_type_name %}
                <template #column-type.typeName="{ item }">
                    <component
                        :is="getTypeCellComponent(item)"
                        v-if="hasTypeCellComponent(item)"
                        :tax-rule="item"
                    />
                    <template v-else>
                        {{ item.type.typeName }}
                    </template>
                </template>
                {% endblock %}

                {% block sw_settings_tax_rule_grid_column_tax_rule_active_from %}
                <template #column-activeFrom="{ item }">
                    {{ dateFilter(item.activeFrom, { month: '2-digit', day: '2-digit' }) }}
                </template>
                {% endblock %}

                {% block sw_settings_tax_list_grid_columns_actions %}
                <template #actions="{ item }">
                    {% block sw_settings_tax_list_grid_columns_actions_edit %}
                    <sw-context-menu-item
                        class="sw-tax-list__edit-action"
                        :disabled="!acl.can('tax.editor') || undefined"
                        @click="showRuleModal(item)"
                    >
                        {{ $tc('sw-settings-tax.list.contextMenuEdit') }}
                    </sw-context-menu-item>
                    {% endblock %}

                    {% block sw_settings_tax_list_grid_columns_actions_delete %}
                    <sw-context-menu-item
                        class="sw-tax-list__delete-action"
                        variant="danger"
                        :disabled="!acl.can('tax.editor') || undefined"
                        @click="onDelete(item.id)"
                    >
                        {{ $tc('sw-settings-tax.list.contextMenuDelete') }}
                    </sw-context-menu-item>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_settings_tax_list_grid_action_modals %}
                <template #action-modals="{ item }">
                    {% block sw_settings_tax_list_delete_modal %}
                    <sw-modal
                        v-if="showDeleteModal === item.id"
                        :title="$tc('global.default.warning')"
                        variant="small"
                        @modal-close="onCloseDeleteModal"
                    >
                        {% block sw_settings_tax_list_delete_modal_confirm_delete_text %}
                        <p class="sw-settings-tax-list__confirm-delete-text">
                            {{ $tc('sw-settings-tax.taxRuleCard.textDeleteConfirm', { name: item.country.name, type: item.type.typeName }, 0) }}
                        </p>
                        {% endblock %}

                        {% block sw_settings_tax_list_delete_modal_footer %}
                        <template #modal-footer>
                            {% block sw_settings_tax_list_delete_modal_cancel %}
                            <mt-button
                                size="small"
                                variant="secondary"
                                @click="onCloseDeleteModal"
                            >
                                {{ $tc('global.default.cancel') }}
                            </mt-button>
                            {% endblock %}

                            {% block sw_settings_tax_list_delete_modal_confirm %}
                            <mt-button
                                variant="critical"
                                size="small"
                                @click="onConfirmDelete(item.id)"
                            >
                                {{ $tc('sw-settings-tax.list.buttonDelete') }}
                            </mt-button>
                            {% endblock %}
                        </template>
                        {% endblock %}
                    </sw-modal>
                    {% endblock %}
                </template>
                {% endblock %}

                {% block sw_settings_tax_list_grid_pagination %}
                <template #pagination>
                    <sw-pagination
                        v-bind="{ page, limit, total }"
                        :total-visible="7"
                        @page-change="paginate"
                    />
                </template>
                {% endblock %}

            </sw-data-grid>
            {% endblock %}
        </template>
    </template>

    {% block sw_tax_rule_card_grid_column_modal %}
    <sw-settings-tax-rule-modal
        v-if="showModal"
        :tax="tax"
        :current-rule="currentRule"
        @modal-close="onModalClose"
    />
    {% endblock %}

    {% block sw_tax_rule_card_empty_state %}
    <template v-if="taxRulesEmpty || disabled">
        <div class="sw-settings-tax-rule-card__empty-state">
            {% block sw_tax_rule_card_empty_state_image %}
            <img
                :src="assetFilter('administration/administration/static/img/empty-states/settings-empty-state.svg')"
                alt=""
            >
            {% endblock %}

            {% block sw_tax_rule_card_empty_state_label %}
            <div class="sw-settings-tax-rule-card__empty-state--label">
                <p v-if="disabled">
                    {{ $tc('sw-settings-tax.taxRuleCard.createStateDescription') }}
                </p>
                <p v-else>
                    {{ $tc('sw-settings-tax.taxRuleCard.emptyStateDescription') }}
                </p>
            </div>
            {% endblock %}

            {% block sw_tax_rule_card_empty_state_button %}
            <mt-button
                v-tooltip.bottom="{
                    message: $tc('sw-privileges.tooltip.warning'),
                    disabled: acl.can('tax.editor'),
                    showOnDisabledElements: true
                }"
                class="sw-settings-tax-rule-card__empty-state--button"
                ghost
                size="small"
                :disabled="disabled || !acl.can('tax.editor') || undefined"
                variant="secondary"
                @click="showModal = true"
            >
                {{ $tc('sw-settings-tax.taxRuleCard.labelCreateNew') }}
            </mt-button>
            {% endblock %}
        </div>
    </template>
    {% endblock %}
</mt-card>
{% endblock %}
